<template>
  <div class="custom-card">
    <a-card title="活动报名信息收集" :bordered="false" :tab-list="tabList" :active-tab-key="key"
      @tabChange="key => onTabChange(key, 'key')">
      <div class="registration-info-collect">
        <div class="box">
          <template v-if="key == 'coollect'">
            <div ref="formBoxRef" class="form-box" :style="{ height: formMaxHeight + 'px' }">
              <Form :item="itemList" :disabled="true" />
            </div>
          </template>
          <template v-else>
            <div class="sign-info">
              <a-form-model ref="form" :model="formSign" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                <a-form-model-item label="代签人">
                  <a-input v-model="formSign.replaceSignPersonName" :disabled="true" />
                </a-form-model-item>
                <a-form-model-item label="手机号码">
                  <a-input v-model="formSign.replaceSignPersonPhone" :disabled="true" />
                </a-form-model-item>
                <a-form-model-item label="单位名称">
                  <a-input v-model="formSign.replaceSignCompanyName" :disabled="true" />
                </a-form-model-item>
                <a-form-model-item label="单位职务">
                  <a-input v-model="formSign.replaceSignCompanyPosition" :disabled="true" />
                </a-form-model-item>
              </a-form-model>
            </div>
          </template>
          <div v-if="activityTicketId" class="qr-code">
            <span class="title">报名凭证码</span>
            <div class="qr-code-img">
              <img v-if="orderCodeImg && registrationInfo.approvalStatus == RosterApprovalStatusEnum.APPROVED"
                :src="orderCodeImg" />
              <span v-else-if="registrationInfo.approvalStatus != RosterApprovalStatusEnum.CANCELLED"
                class="no-img">报名成功后生成</span>
  
              <div v-if="registrationInfo.approvalStatus == RosterApprovalStatusEnum.CANCELLED" class="cancelled">
                已取消
              </div>
            </div>
            <div class="code" v-if="registrationInfo.approvalStatus == RosterApprovalStatusEnum.APPROVED">
              {{ registrationInfo.consumeNo }}
            </div>
            <div class="desc">{{ registrationInfo.ticketName }}</div>
          </div>
        </div>
        <template v-if="key === 'coollect'">
          <div v-if="isShowExpand" class="expand">
            <a-button type="link" @click="handleExpand">
              <template v-if="expand">
                收起全部信息
                <a-icon type="caret-up" />
              </template>
              <template v-else> 展开全部信息<a-icon type="caret-down" /> </template>
            </a-button>
          </div>
        </template>
  
        <div v-if="!disabled">
          <a-button type="primary" ghost @click="handleEdit"> <a-icon type="edit" />修改信息 </a-button>
        </div>
      </div>
    </a-card>
    <!-- 新增报名-自定义表单 -->
  
    <UserCustomFormModal v-if="rowData.activityId" ref="userCustomFormModal" :activityId="rowData.activityId"
      @success="handleSuccess" />
  </div>
</template>

<script>
// 报名信息收集

import Form from '@/components/Form'
import { activityRegisterFormItem } from '@/api/activity/register'
import { getTicketList } from '@/api/activity/activity'
import CustomCard from './CustomCard.vue'
import { convertFieldValue } from '@/api/member/member'
import UserCustomFormModal from '@/views/activity/components/customFormModal/index.vue'
import { signStatusEnum, signTypeEnum, RosterApprovalStatusEnum, RegisterTypeEnum } from '@/enums/activity'
import QRCode from 'qrcode'
export default {
  components: {
    CustomCard,
    Form,
    UserCustomFormModal,
    QRCode
  },
  props: {
    registrationInfo: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    disabled() {
      return this.registrationInfo.registerActivityType === 'other_join' // 协办方
    },
    isSignInfo() {
      if (!this.rowData) return false
      return this.rowData.signStatus == signStatusEnum.END && this.rowData.signType == signTypeEnum.REPLACE
    },
    tabList() {
      return [
        {
          key: 'coollect',
          tab: '报名信息',
          show: true
        },
        {
          key: 'sign',
          tab: '代签到人信息',
          show: this.isSignInfo
        }
      ].filter(item => item.show)
    }
  },
  data() {
    return {
      RosterApprovalStatusEnum,
      activityTicketId: undefined,
      rowData: {},
      itemList: [],
      ticketList: [],
      formMaxHeight: 320,
      originalHeight: 0,
      isShowExpand: false,
      expand: false,
      orderCodeImg: '',
      formSign: {
        replaceSignCompanyName: undefined,
        replaceSignCompanyPosition: undefined,
        replaceSignPersonName: undefined,
        replaceSignPersonPhone: undefined
      },
      key: 'coollect'
    }
  },
  watch: {
    registrationInfo() {
      this.rowData = {
        activityId: this.$route.query.activityId,
        id: this.registrationInfo.registerId,
        signStatus: this.registrationInfo.signStatus,
        signType: this.registrationInfo.signType,
        activityTicketId: this.registrationInfo.activityTicketId,
        replaceSignCompanyName: this.registrationInfo.replaceSignCompanyName,
        replaceSignCompanyPosition: this.registrationInfo.replaceSignCompanyPosition,
        replaceSignPersonName: this.registrationInfo.replaceSignPersonName,
        replaceSignPersonPhone: this.registrationInfo.replaceSignPersonPhone
      }
      this.formSign = {
        id: this.registrationInfo.registerId,
        replaceSignCompanyName: this.registrationInfo.replaceSignCompanyName,
        replaceSignCompanyPosition: this.registrationInfo.replaceSignCompanyPosition,
        replaceSignPersonName: this.registrationInfo.replaceSignPersonName,
        replaceSignPersonPhone: this.registrationInfo.replaceSignPersonPhone
      }
      QRCode.toDataURL(this.registrationInfo.consumeNo)
        .then(url => {
          this.orderCodeImg = url
        })
        .catch(err => {
          console.error(err)
        })
      this.getActivityRegisterFormItem()
      this.handelTicketListDownList()
    }
  },
  mounted() { },

  methods: {
    onTabChange(key, type) {
      this[type] = key
      if (key === 'sign') {
        this.expand = false
      }
    },
    handleSuccess() {
      this.$emit('success')
    },
    handleExpand() {
      this.expand = !this.expand
      if (this.expand) {
        this.$refs.formBoxRef.style.overflow = 'visible'
        this.$refs.formBoxRef.style.height = 'auto'
      } else {
        this.$refs.formBoxRef.style.overflow = 'hidden'
        this.$refs.formBoxRef.style.height = this.formMaxHeight + 'px'
      }
    },
    async getActivityRegisterFormItem() {
      let res = await activityRegisterFormItem(this.rowData.activityId, this.rowData.id)
      let itemList = res.data.activityFormItemMap[0] || []
      let answerList = res.data.activityFormUserAnswerList || []
      this.activityTicketId = res.data.activityTicketId
      itemList = itemList.map((item, index) => {
        let answerItem = answerList.find(f => f.formItemId === item.id)
        let text = convertFieldValue(answerItem, item)
        return {
          ...item,
          isRequired: index === 0 ? 1 : 0,
          content: text
        }
      })
      this.itemList = itemList;
      setTimeout(() => {
        const height = this.getOriginalHeight(this.$refs.formBoxRef)
        if (height > this.formMaxHeight) {
          this.isShowExpand = true
          this.originalHeight = height
        }
      })
    },
    handelTicketListDownList() {
      return getTicketList(this.rowData.activityId).then(res => {
        if (res.code === 0) {
          this.ticketList = res.data || []
        }
      })
    },
    getOriginalHeight(element) {
      const originalOverflow = element.style.overflow
      element.style.overflow = 'visible'
      const height = element.scrollHeight
      element.style.overflow = originalOverflow
      return height
    },
    handleEdit() {
      this.$refs.userCustomFormModal.openModal(this.rowData, 'edit')
    }
  }
}
</script>

<style lang="less" scoped>
.registration-info-collect {
  background: #f7f8fa;
  padding: 20px;

  .expand {
    margin-left: 250px;
  }

  .box {
    display: flex;
    justify-content: space-between;

    .form-box {
      width: 700px;
      overflow: hidden;
    }

    .sign-info {
      width: 700px;
    }

    .qr-code {
      position: relative;
      top: -40px;
      box-sizing: border-box;
      display: flex;
      min-width: 420px;
      width: 420px;
      height: 290px;
      padding: 16px;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: #fff;

      .title {
        color: #1d2129;
        font-family: 'PingFang SC';
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        /* 140% */
      }

      .qr-code-img {
        width: 160px;
        height: 160px;
        background: #ebedf0;
        text-align: center;
        position: relative;

        .no-img {
          color: #333;
          font-feature-settings: 'clig' off, 'liga' off;
          /* T4/CN-Regular */
          font-family: 'PingFang SC';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 160px;
        }

        img {
          width: 100%;
        }

        .cancelled {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .code {
        color: #1d2129;
        font-family: 'Nunito Sans';
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;
        /* 128.571% */
        letter-spacing: 5.6px;
      }

      .desc {
        font-family: 'PingFang SC';
        color: #165dff;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        /* 140% */
      }
    }
  }
}
::v-deep .ant-card-head-title{
  margin-bottom: 20px;
}
</style>
